<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>应急信息管理_监视预警界面</title>
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public.css" type="text/css" />
        <!-- css -->
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/bootstrap.min.css" />
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/query.css" />
		<link rel="stylesheet" href="<%=basePath%>jclient/css/public/baidumap.css" />
		<link href="<%=basePath%>jclient/css/public/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    *{padding:0;margin:0;}
     body{
        background-color: #ffffff;
     }
     .td1{
      background-color: #5B9BD5;color: #FFFFFF; 
      width:80px;text-align:center;
       line-height: 30px;height: 30px;
    }
    .td3{padding:0 5px ;} 
    .td2{
      width: 120px;
      background-color: #EAEFF7;
      line-height: 30px;height: 30px;
      text-align: center;
    }
    .in1{
      background-color: #EAEFF7;
      width: 100%;
      height: 100%;
      border: none;
      text-align: center;
    }
    
    </style>
  </head>
  <body bgcolor="#000"  style="height: 100%;">
   
    	<!-- main content -->
		<div class="main-content">

			<!-- map -->
			<div id="map">	
			</div><!-- map end -->
			
			<!-- panel bg -->
			<div class="panel-bg">
				<!-- panel hide/show block -->
				<div class="panel-show-hide-block">
					<a href="javascript:void(0);" class="panel-block-normal">
						<i class="glyphicon glyphicon-arrow-right"></i>
						<span>隐藏</span>
					</a>
				</div><!-- panel hide/show block end -->
				
				<!-- panel content bg -->
				<div class="panel-bg-inner">
				</div><!-- panel content bg end -->
			</div><!-- panel bg end -->
			


			<!-- panel content -->
			<div class="panel-content">
				<div style="border-bottom: 1px solid #BCBCBC;margin-right: 10px;">
				   <marquee  behavior="scroll" direction="left" 
	  						width="100%"  SCROLLDELAY="110" >
	  					<font size="3">2015年12月21日13:00于桥水库水体藻细胞密度15000万个/升</font>
	  				</marquee>
				</div>
				<!--关键指标的实时数据-->
				<h4 align="center" style="font-family: '黑体'">关键指标实时数据</h4>
			    <ul style="list-style:decimal;padding-left: 20px;font-size: 15;">
			      <li style="font-family: '黑体'">
			      	<h5>
			      		测站:于桥水库x1站&nbsp;  数据获取时间:2015年12月21日5时 
			      	</h5>
			      </li>
			      <li >水体藻细胞密度：
			      <span id="" style="display:inline-block;background-color: red">15000万个/升</span>
			     	<span style="background-color: red">正常值：10000万个/升 超标：5000万个每升</span>
			      </li>
			      <li >优势种群微囊藻比例：
			      <span id="" style="display:inline-block;">80%</span>
			      </li>
			      <li >微囊藻比例毒素lr：
			      <span id="" style="display:inline-block;">0.001毫克每升</span>
			      </li>
			      <li >水温：
			      <span id="" style="display:inline-block;">25℃</span>
			      </li>
			      <li >透明度：
			      <span id="" style="display:inline-block;">50cm</span>
			      </li>
			      <li >每升水叶绿素a含量:
			      <span id="" style="display:inline-block;">0.04</span>
			      </li>
			      <li >泵站输水量：
			      <span id="" style="display:inline-block;">9.94万m3/d,</span>
			      </li>
			      <li >每升水叶绿素a含量：
			      <span id="" style="display:inline-block;">0.04</span>
			      </li>
			      <li >管道压力：
			      <span id="" style="display:inline-block;">500N</span>
			      </li>
			    </ul>
			      <hr>
			      <p align="center" ><h4 align="center"style="font-family: '黑体'">人工填写数据</h4>
				    <ul id="rgsj_ul" style="list-style:decimal;padding-left: 20px;font-size: 15;">
				      <li style="font-family: '黑体'">
			      	    <h5>
			      		   测站:于桥水库x2站&nbsp;  数据获取时间:2015年12月21日5时 
			      	    </h5>
			      	  </li>
				      <li >蓝藻聚集面积占库区水面积：30%</li>
				      <li >水体颜色：蓝色</li>
				      <li >水体气味：良好</li>
				      <li >水温：15℃</li>
				      <li >引滦线工程设施状态：良好</li>
				      <li >原水输配管线状态：良好</li>
				    </ul>
			</div><!-- panel content end -->
			
		</div><!-- main content end -->
		 		<table id="bjsj"  cellpadding="6px" cellspacing="4px" style="display: none;">
			    	<tr>
			    		<td scope="row" class="td1">数据名称</td>
			    		<td class="td2"><input class="in1" value="水体藻细胞密度"></td>
			    		<td class="td1">时间</td>
			    		<td class="td2"><input class="in1" value="2014/8/1 14:30"></td>
			    	</tr>
			    	<tr>
			    		<td class="td1">数值</td>
			    		<td class="td2"><input class="in1"  value="1200" ></td>
			    		<td class="td1">单位</td>
			    		<td class="td2"><input class="in1"  value="万个/升" ></td>
			    	</tr>
			    	<tr>
			    		<td colspan="2"  class="td1" style="background-color: #5B9BD5;color: #FFFFFF;">事件名称</td>
			    		<!-- 点击修改功能未添加 -->
			    		<td colspan="2" class="td2"><a href="javascript:#yjsjgl_xjsj.jsp">.......编辑</a>
			    		</td>
			    	</tr>
			    	<tr>
			    		<td colspan="2"   class="td1" style="background-color: #FFC000;color: #FFFFFF;cursor: pointer;">关闭报警</td>
			    		<td colspan="2"  class="td1" id="click" onclick="javascript:$('.tip').fadeIn(200);" style="background-color: #C5E0B4;color: #FFFFFF;cursor: pointer;">编辑数据</td>
			    	</tr>
			    </table>
			    
			    <div class="tip" style="width: 400px;height: 200px;top:95px;border: 1px solid #cccccc;">
    				<div class="tiptop"><span>信息填写</span><a></a></div>
     				 <div class="tipinfo" style="margin-left:5px;padding-top:5px">
      						  <div class="tipright"  style="padding:0px;padding-left: 2px;">
      						  <table   cellpadding="6px" cellspacing="4px" >
			    				<tr>
			    					<td scope="row" style="background-color: #FFFFFF;color:#000000 ;" class="td3" >水温</td>
			    					<td class="td2"><input class="in1" value="25℃" ></td>
			    					<td class="td3" style="background-color: #FFFFFF;color:#000000 ;">水体藻细胞密度</td>
			    					<td class="td2"><input class="in1"  value="1200万个/升"></td>
			    				</tr>
			    				<tr>
			    					<td class="td3" style="background-color: #FFFFFF;color:#000000 ;">透明度</td>
			    					<td class="td2"><input class="in1" value="50cm" ></td>
			    					<td class="td3" style="width:91;background-color: #FFFFFF;color:#000000 ;">原水输配线状态</td>
			    					<td class="td2"><input class="in1" value="良好"></td>
			    				</tr>
			    				<tr>
			    					<td colspan="2"  class="td3" style="background-color: #FFFFFF;color:#000000 ;">引滦线工程设施状态</td>
			    					<td colspan="2" class="td2">
			    					<input class="in1" value="良好">
			    					</td>
			    				</tr>
			   			 </table>
        			</div>
      				</div>
        			<div class="tipbtn" style="margin: 10px 95px ">
      				  <input name="" type="button"  class="sure" value="确定" />&nbsp;
      				  <input name="" type="button"  class="cancel" value="取消" />
     			   </div>
    				</div>
		<!-- javascript -->
		<script src="<%=basePath%>jclient/javascript/public/jquery.min.js"></script>
        <script src="<%=basePath%>jclient/javascript/public/bootstrap.min.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/moment.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/highcharts.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/themes/sand-signika.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/baidumap.js"></script>
		<script>
			var ts;
			var markerArr, rainMarker;
			$(function(){
				//控制彈出窗口
 	 			$(".tiptop a").click(function(){
 				 $(".tip").fadeOut(200);
				});

 				 $(".sure").click(function(){
 				 $(".tip").fadeOut(100);
					});

 				 $(".cancel").click(function(){
 				 $(".tip").fadeOut(100);
					});
				//控制实时数据报警样式
				/* var obj;
				obj=setInterval(function(){ $("#span1").fadeOut(150).fadeIn(150); },300);
				$("ul li span").css("background-color","#00FF00");
				$("#span1").css("background-color","red");
				$("#span1").hover(function(){
					clearInterval(obj);
					},function(){
					obj=setInterval(function(){ $("#span1").fadeOut(150).fadeIn(150); },300);

				});
 */				// 显示/隐藏面板
				$('.panel-show-hide-block a').click(function(){
					if($(this).hasClass('panel-block-normal')){
						/*$('.panel-content').animate({left:'+=420px'}, 200);
						$('.panel-bg').animate({left:'+=420px'}, 200);
						$('.panel-show-hide-block').animate({left:'+=420px'}, 200);*/
						
						// 解决IE及chrome浏览器定位出现问题的BUG
						$('.panel-content').animate({width:'0px'}, 200);
						$('.panel-bg').animate({width:'24px'}, 200);
						$('.panel-bg .panel-bg-inner').hide();
						
						$(this).find('i').attr('class','glyphicon glyphicon-arrow-left');
						$(this).find('span').text('显示');
						$(this).removeClass('panel-block-normal').addClass('panel-block-highlight');
					}else{
						/*$('.panel-content').animate({left:'-=420px'}, 200);
						$('.panel-bg').animate({left:'-=420px'}, 200);
						$('.panel-show-hide-block').animate({left:'-=420px'}, 200);*/
						
						// 解决IE及chrome浏览器定位出现问题的BUG
						$('.panel-content').animate({width:'410px'},200);
						$('.panel-bg .panel-bg-inner').show();
						$('.panel-bg').animate({width:'444px'}, 200);
						
						$(this).find('i').attr('class','glyphicon glyphicon-arrow-right');
						$(this).find('span').text('隐藏');
						$(this).addClass('panel-block-normal').removeClass('panel-block-highlight');
					}
				});
				
				// 加载百度地图
        		ts = $('#map').baidumap({
        			point : { lat: 118.50, lng:39.19},		//114.534436,36.564449
        			zoom : 9,
					scrollWheelZoom : false,
        			navigationCtl : false,
        			boundary : { show: true, areaName: '天津市', setViewport: false }
        		});
				
				// 闪烁标注点
				var infoOpts = {
					width : 400,     // 信息窗口宽度    
					height: 200,     // 信息窗口高度   
					offset: ts.Size(0, 0),	// 信息窗口位置偏移量
					title : "<b>于桥水库2015年12月22日8时预警信息</b>"  // 信息窗口标题 
				};
				var content = fillInfoWindow();
				markerArr = ts.addmarkers([
					{
						point : {lat: 117.5052670000, lng:40.0471370000 },//114.203788,36.711741  114.074432,36.74645
        				label : { text:"于桥水库", offset:{ x:-8, y:20 } },
						icon : { url:'<%=basePath%>jclient/images/publicimg/icon1_warning.gif', width:120, height:120},
						infoWinEventName : 'click',
						infoWindow: ts.addInfoWindow(content, infoOpts),
						click : function() {
							//alert("点击区域，重新现实信息");
						}
        			}
				]);
				ts.showBoundary("宝坻区",false,false,"##BFD87C");
				ts.showBoundary("武清区",false,false,"#F0C195");
				ts.showBoundary("蓟县",false,false,"#A8CEA5");
				
				ts.showBoundary("西青区",false,false,"#F0C195");
				ts.showBoundary("东丽区",false,false,"#BED881");
				ts.showBoundary("北辰区",false,false,"#D5C22A");
				ts.showBoundary("宁河县",false,false,"#A7CD72");
				ts.showBoundary("静海县",false,false,"#E99CA4");
				ts.showBoundary("津南区",false,false,"#5D9AB4");
				ts.showBoundary("滨海新区",false,false,"#E8FABF");
				$("#rgsj_ul input").css("border","0px");
				$("#rgsj_ul input").css("width","100px");
				$("#rgsj_ul input").css("background-color","#F8F6F8");
				$("#rgsj_ul input").hover(function(){
				       $(this).css("background-color","#FFC000");
					},function(){
					$(this).css("background-color","#F8F6F8");
				});
			});
		
			function fillInfoWindow(){
				// 信息内容
				var contextHtml = "<div style='font-size:12px;'>";
				contextHtml += "<hr /> <table  cellpadding=\"6\" cellspacing=\"4\" >";
				contextHtml +=$("#bjsj").html();
				contextHtml += "</table></div>";
				return contextHtml;
			}
			
			
		</script>
  </body>
</html>
